/**
 * Navigation认证导航、路由防御
 * 通过react-navigation中的SwitchNavigator来进行判断进入路由时的状态，然后进行不同屏幕的渲染，
 * 通过的定义一个页面，页面中使用ActivityIndicator组件，在进入此屏幕的时候，执行一些判断用户时候登录的状态，然后根据SwitchNavigator方法，进入到不同的   页面中去;react-navigator中提供AsyncStorage方法将状态保存到app线程中去；StatusBar用来修改进入的时候顶部的bar的状态
 */

import React from "react";
import {
    ActivityIndicator,
    AsyncStorage,
    StatusBar,
    StyleSheet,
    View,
    Button,
    Text
} from "react-native";
import { StackNavigator, SwitchNavigator } from "react-navigation";

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: "Welcome to the app!"
    };
    render() {
        return (
            <View style={styles.container}>
                <Button
                    title="Show me more of the app"
                    onPress={this._showMoreApp}
                />
                <Button
                    title="Actually, sign me out :)"
                    onPress={this._signOutAsync}
                />
            </View>
        );
    }

    _showMoreApp = () => {
        this.props.navigation.navigate("Other");
    };

    _signOutAsync = async () => {
        await AsyncStorage.clear();
        this.props.navigation.navigate("Auth");
    };
}

class SignInScreen extends React.Component {
    static navigationOptions = {
        title: "Please sign in"
    };

    render() {
        return (
            <View style={styles.container}>
                <Button title="Sign in!" onPress={this._signInAsync} />
            </View>
        );
    }

    _signInAsync = async () => {
        await AsyncStorage.setItem("userToken", "abc");
        this.props.navigation.navigate("App");
    };
}
class OtherScreen extends React.Component {
    render() {
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center"
                }}
            >
                <Text>other!</Text>
            </View>
        );
    }
}
class AuthLoadingScreen extends React.Component {
    constructor(props) {
        super(props);
        setTimeout(()=> {
            this._bootstrapAsync();
        },3000)
        
    }

    // Fetch the token from storage then navigate to our appropriate place
    _bootstrapAsync = async () => {
            const userToken = await AsyncStorage.getItem("userToken");
            // This will switch to the App screen or Auth screen and this loading
            // screen will be unmounted and thrown away.
            this.props.navigation.navigate(userToken ? "App" : "Auth");
    };

    // Render any loading content that you like here
    render() {
        return (
            <View style={styles.container}>
                <ActivityIndicator />
                <StatusBar barStyle="dark-content" />
            </View>
        );
    }
}

const styles = {
    container:{
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    }
}

const AppStack = StackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = StackNavigator({ SignIn: SignInScreen });
export default SwitchNavigator(
    {
        AuthLoading: AuthLoadingScreen,
        App: AppStack,
        Auth: AuthStack
    },
    {
        initialRouteName: "AuthLoading"
    }
);
